{% extends "base.html" %}
{% block title %}调整预约时间{% endblock %}
{% block head %}
    {{ super() }}
    <style>
        .toolbar .toolbar-inner {
            justify-content: center;
        }

        .picker-calendar-year-picker {
            max-width: unset;
            margin: 0 15px;
        }

        .weui-picker-calendar {
            height: 16.5rem;
        }

        .picker-calendar-month-picker a.icon-only, .picker-calendar-year-picker a.icon-only {
            width: unset;
        }

        .picker-calendar-week-days {
            margin: 10px 0;
            background: unset;
        }

        .picker-calendar-week-days:after, .picker-calendar-row:after {
            display: none;
        }

        .weui-picker-calendar .picker-modal-inner {
            height: 14rem;
        }

        .picker-calendar-week-days + .picker-calendar-months {
            height: 12rem;
        }

        .picker-calendar-day span {
            line-height: 15px;
        }

        .picker-calendar-day span > small {
            display: block;
        }

        .picker-calendar-day.picker-calendar-day-today span {
            background: unset;
            color: unset;
        }

        .picker-calendar-day.picker-calendar-day-canSelected span {
            background: #9cc7fa;
            color: #333333;
            cursor: pointer;
        }

        .picker-calendar-day.picker-calendar-day-selected span {
            background: #0066ff;
            color: #fff;
        }

        .picker-calendar-day.picker-calendar-day-full {
            cursor: auto;
        }

        .timeResItem {
            font-size: 12px;
            margin: 10px 15px;
        }

        .timeResItem > .weui-flex__item {
            padding: 10px 15px;
            background: #ECF2FE;
            color: #388FF5;
            border-top-left-radius: 15px;
            border-bottom-left-radius: 15px;
        }

        .timeResItem > .yuyueBtn {
            padding: 10px 15px;
            background: #457ADF;
            color: #fff;
            border-top-right-radius: 15px;
            border-bottom-right-radius: 15px;
        }

        .timeResItem.disabled > .weui-flex__item {
            background: #EBECF0;
            color: #999999;
        }

        .timeResItem.disabled > .yuyueBtn {
            background: #DFDFDF;
            color: #cccccc;
        }

        .info-page {
            background: #ffffff;
        }

        .toolbar {
            font-size: 16px;
            background: #ffffff;
        }

        #res_datetime {
            margin: 15px;
        }

    </style>
{% endblock %}
{% block body %}
    <div class="contianer info-page">
        <div id="inline-calendar"></div>
        <div id="res_datetime"></div>
        <div id="reservationTimes">
        </div>
    </div>
{% endblock %}
{% block script %}
    {{ super() }}
    <script src="{{ url_for('page.send_static',filename='js/calendar.js') }}?v=5"></script>
    <script type="text/javascript">

        $(function () {
            var id = common.getQueryString("id");
            var datetime = common.getQueryString("date") + " " + common.getQueryString("time");
            $.post(navRoot + "/api/res/date", {"id": id}, function (data) {
                if (data["code"] == 200) {
                    var dateList = data["data"]["data"];
                    var dateValues = [];
                    for (var i in dateList) {
                        if (dateList[i]) {
                            var valueDate = new Date(common.dateFormart(dateList[i], "yyyy/MM/dd"));
                            dateValues.push(+valueDate);
                        }
                    }
                    if (dateValues.length > 0) {
                        $("#inline-calendar").calendar1({
                            container: "#inline-calendar",
                            input: "#date3",
                            canValues: dateValues,
                            value: [dateValues[0]],
                            onDayClick: function (p, ddd, dateYear, dateMonth, dateDay) {
                                getCurDateTimes(dateYear + common.preZero(parseInt(dateMonth) + 1) + common.preZero(parseInt(dateDay)));
                            }
                        });
                    } else {
                        $("#inline-calendar").calendar1({
                            container: "#inline-calendar",
                            input: "#date3",
                            canValues: dateValues,
                            value: [],
                            onDayClick: function (p, ddd, dateYear, dateMonth, dateDay) {
                                getCurDateTimes(dateYear + common.preZero(parseInt(dateMonth) + 1) + common.preZero(parseInt(dateDay)));
                            }
                        });
                    }
                    if (datetime != " ") {
                        $("#res_datetime").html('预约时间：<span class="text-red">' + datetime + '</span>');
                    } else {
                        document.title = "选择预约时间";
                    }
                    if (dateValues[0]) {
                        var defaultDate = new Date(dateValues[0]);
                        getCurDateTimes(defaultDate.getFullYear() + "" + common.preZero(defaultDate.getMonth() + 1) + "" + common.preZero(defaultDate.getDate()));
                    }
                } else {
                    $.alert(data['errmsg']);
                }
            }, "json");
            {#$(".picker-calendar-day-selected").click(function () {#}
            {#    var year = $(this).attr("data-year");#}
            {#    var month = $(this).attr("data-month");#}
            {#    var day = $(this).attr("data-day");#}
            {#    getCurDateTimes(year + common.preZero(month + 1) + common.preZero(day));#}
            //})
        })

        function getCurDateTimes(dateStr) {
            $.showLoading();
            $("#reservationTimes").empty();
            var id = common.getQueryString("id");
            $.post(navRoot + "/api/res/time", {"id": id, "date": dateStr}, function (data) {
                if (data["code"] == 200) {
                    var timeList = data["data"]["data"];
                    for (var i in timeList) {
                        var item = $('<div class="weui-flex timeResItem">' +
                            '            <div class="weui-flex__item">' + timeList[i]["StartTime"] + '-' + timeList[i]["EndTime"] + '（' + timeList[i]["ValidCount"] + '/' + timeList[i]["TotalCount"] + '）</div>' +
                            '            <div class="yuyueBtn">预约 </div>' +
                            '        </div>');
                        if (timeList[i]["ValidCount"] == 0) {
                            item.addClass("disabled");
                            item.find(".yuyueBtn").text("约满");
                        } else {
                            item.data("data", timeList[i]);
                            //点击更新预约接口
                            item.click(function () {
                                var itemInfo = $(this).data("data");
                                var params = {
                                    "id": id,
                                    "sourceID": itemInfo["AppointSourceID"]
                                };
                                $.showLoading();
                                var type = common.getQueryString("type");
                                if (type == "hand") {
                                    $.post(navRoot + "/api/res/hand", params, function (data) {
                                        if (data["code"] == 200) {
                                            sessionStorage.setItem("res_list_state", 1);
                                            location.href = navRoot + "/reservation/result?status=1&id=" + params["id"] + "&type=hand";
                                        } else {
                                            location.href = navRoot + "/reservation/result?status=0&err=" + data["errmsg"] + "&type=hand";
                                        }
                                        $.hideLoading();
                                    }, "json")
                                } else {
                                    $.post(navRoot + "/api/res/change", params, function (data) {
                                        if (data["code"] == 200) {
                                            sessionStorage.setItem("res_list_state", 1);
                                            location.href = navRoot + "/reservation/result?status=1&id=" + params["id"];
                                        } else {
                                            location.href = navRoot + "/reservation/result?status=0&err=" + data["errmsg"];
                                        }
                                        $.hideLoading();
                                    }, "json")
                                }

                            })
                        }
                        $("#reservationTimes").append(item);
                    }
                } else {
                    $.alert(data['errmsg']);
                }
                $.hideLoading();
            }, "json")
        }
    </script>
{% endblock %}